// 区域统计对话框

import React,{useState,useEffect} from 'react';
import DialogSimple from './DialogSimple' ;
import {Table , Form, Button } from 'react-bootstrap' ;


//props.isOpen
//props.onCancel
//props.lyrParams
//props.onOk
//props.onSelectROIClick
//props.appCurrentROI  app当前ROI
//props.selectedROI 该对话框选择的ROI
function DialogSimpleStatistic(props) {

    const [validMin, setValidMin] = useState(0) ;
    const [validMax, setValidMax] = useState(0)  ;
    const [roiObject, setRoiObject] = useState(null);


     //初始化
     useEffect(() => {
        setValidMin(0) ;
        setValidMax(0);
        setRoiObject(null) ;
        if( typeof props.lyrParams !== 'undefined'
        && props.lyrParams!==null 
        && typeof props.lyrParams.bandList !== 'undefined' 
        && props.lyrParams.bandList !== null 
        && props.lyrParams.bandList.length > 0 ){
            setValidMin(props.lyrParams.bandList[0].validMin) ;
            setValidMax(props.lyrParams.bandList[0].validMax) ;
        }
    }, [props.lyrParams]);
    

    //打开对话框更新 选中的ROI
    useEffect(() => {
        if( props.isOpen===true && props.selectedROI !== null ){
            setRoiObject(props.selectedROI) ;
        }
    }, [props.isOpen]);


    //onCurrentROI Click
    const onCurrentROIClick = function () {
        setRoiObject( props.appCurrentROI ) ;
    }


    //onClearROI click
    const onClearROIClick = function(){
        setRoiObject(null) ;
    }


    //onOk
    const onOk = function(){
        if( props.lyrParams===null || props.lyrParams.name==='' ) return ;
        if( roiObject===null ){
            console.log("null roi");
            return ;
        }

        let roiid = '';
        let roigeojson = '' ;
        if( roiObject.rid !== 0 ){
            if( roiObject.uid===0 ){
                roiid = 'sys:'+roiObject.rid ;
            }else{
                roiid = 'user:' + roiObject.rid ;
            }
        }else{
            roigeojson = roiObject.geojson ;
        }
        
        if( roiid==='' && roigeojson==='' ){
            console.log("bad roi") ;
            return ;
        }
        
        if( validMin === '' ){
            console.log("bad validMin") ;
            return ;
        }

        if( validMax === '' ){
            console.log("bad validMax") ;
            return ;
        }

        props.onOk(
            props.lyrParams.displayid,
            props.lyrParams.name,
            roiid,
            roigeojson , 
            validMin,
            validMax   
        ) ;
    }

    //onCanel
    const onCancel = function() {
        props.onCancel() ;
    }

    //render content
    const renderContent = function () {
        return (
            <div style={{margin:'auto',marginTop:'8px'}}>
				<Form style={{textAlign:'center'}}>
                    <Table>
                        <tbody>
                            <tr>
                                <td>
                                数据名称:
                                </td>
                                <td>
                                <Form.Control 
                                placeholder=''
                                 type="text" 
                                 style={{width:'240px'}} 
                                 disabled size='sm' 
                                value={(props.lyrParams!==null)?(props.lyrParams.productDisplay.productname):""} />
                                </td>
                            </tr>
                            <tr>
                                <td>感兴趣区:</td>
                                <td>
                                <Form.Control 
                                placeholder='请选择感兴趣区'
                                type="text" style={{width:'240px'}} 
                                disabled size='sm'
                                value={(roiObject!==null)?roiObject.name:""} />
                                </td>
                            </tr>
                            <tr>
                                <td></td>
                                <td>
                                <Button size='sm' variant="success" 
                                    style={{marginRight:'8px'}}
                                    onClick={onCurrentROIClick}>当前ROI</Button>
                                    <Button size='sm' variant="secondary" 
                                    style={{marginRight:'8px'}}
                                    onClick={props.onSelectROIClick}>选择ROI</Button>
                                    <Button size='sm' variant="warning" 
                                    onClick={onClearROIClick}>清除ROI</Button>
                                </td>
                            </tr>
                            <tr>
                                <td>统计有效区间下限:</td>
                                <td>
                                <Form.Control placeholder='' type="number" style={{width:'240px'}} size='sm'
                                value={validMin} onChange={(e)=>setValidMin(e.target.value)} />
                                </td>
                            </tr>
                            <tr>
                                <td>统计有效区间上限:</td>
                                <td>
                                <Form.Control placeholder='' type="number"
                                 style={{width:'240px'}} 
                                 size='sm' 
                                 value={validMax} onChange={(e)=>setValidMax(e.target.value)} />
                                </td>
                            </tr>
                        </tbody>
                    </Table>
				</Form>
            </div>
        )
    }


    return <DialogSimple isOpen={props.isOpen} onCancel={onCancel} dialogTitle={"区域统计"} onOk={onOk} renderContent={renderContent} />;
}

export default DialogSimpleStatistic